<!doctype html>
    <html>
        <head>
            {% load static %}
            <meta charset="UTF-8">
            <meta name="viewport"
                content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
            <link rel="stylesheet" type="text/css" href="{% static 'message/css/style.css' %}">
            <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
            <script src="{% static 'js/bootstrap.min.js' %}"></script>
            <script src="{% static 'message/js/style.js' %}"></script>
            <title>Document</title>
        </head>
        <script>
            function insert(data) {
                var div = "<li class='list-group-item'><div class='title'><dt>"+data.title+"</dt></div><div class='detail'><span>founder:"+data.user+"</span><span>createTime:"+data.time+"</span></div><div class='content'><dd>content:</dd><dd>"+data.text+"</dd></div><div class='change' id='"+data.id+"'><span data-toggle='modal' data-target='#revamp'>Modify this entry</span></div></li>"
                $("#js_after").append(div)
            }
            $(function () {
                var url = window.location.href.split('/')
                var category  = url.pop()
                $("#Dname").val(category)
                $("#js_category").val(category)
                $("#js_select").bind('input propertychange', function () {
                    {#console.log(category)#}
                    var msg = $("#js_select").val()
                    $.ajax({
                        url:'{% url 'message:ajax' %}',
                        type:"POST",
                        data:{
                            csrfmiddlewaretoken:'{{ csrf_token }}',
                            msg:msg,
                            category:category
                        },
                        dataType:'json',
                        success:function (data) {
                            {#console.log(data)#}
                            {#console.log(Object.keys(data))#}
                            {#console.log(data)#}
                            $("#js_after").empty()
                            data = data.data
                            {#console.log(data[0])#}
                            data.forEach(insert)
                            {#window.location.href = "{% url 'home:index' %}"#}
                        },
                        error:function (XMLHttpRequest, textStatus, errorThrown) {
                            console.log(XMLHttpRequest.status)
                            console.log(XMLHttpRequest.readyState)
                            console.log(textStatus)
                        }
                    })
                })
            })

        </script>
        <body>
            {% csrf_token %} <!-- 用于ajax提交验证 -->
            <nav class="navbar navbar-expand-sm navbar-dark" style="background-color: rgba(0, 60,123,0.8);">
            <!-- Brand -->
            <a class="navbar-brand" href="{% url 'home:index' %}">Campus Survival Guide</a>
            <!-- Links -->
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    Blog
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="{% url 'blog:index' %}">List</a>
                    <a class="dropdown-item" href="{% url 'blog:edit' %}">Create</a>
                </div>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="{% url 'message:index' 'generalActivity' %}">Activity</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="{% url 'message:index' 'generalLearn' %}">Learn</a>
                </li>

                <!-- Dropdown -->
                <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    Information
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="{% url 'message:index' 'library' %}">library</a>
                    <a class="dropdown-item" href="{% url 'message:index' 'teaching' %}">Teaching</a>
                    <a class="dropdown-item" href="{% url 'message:index' 'canteen' %}">canteen</a>
                    <a class="dropdown-item" href="{% url 'message:index' 'logistics' %}">Logistics</a>
                </div>
                </li>
            </ul>
                <span class="user">
                    {{ name }}
                    <a href="{% url 'message:cancel' %}" class="small">Logout</a>
                </span>
            </nav>
            <div class="container" style="width: 50%;margin-top:10px">
                <div class="row">
                    <div class="col-md-7">
                        <span>Current position：{{ category }}/{{ detail }}</span>
                    </div>
                    <div class="offset-md-2 col-md-3">
                        <div class="input-group input-group-sm">
                        <input id="js_select" type="text" class="form-control" placeholder="search...">
                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="line"></div>
                </div>
                <div class="row">
                    <div class="col-md-12 right">
                        <ul class="list-group">
                            <li class="list-group-item active">
                                The current category of entries
                                <span class="float-right">
                                    <a data-toggle="modal" data-target="#add" href="#" class="small">Click to create a new entry</a>
                                </span>
                            </li>
                            <div id="js_after">
                                {% for item in res %}
                                <li class="list-group-item">
                                    <div class="title">
                                        <dt>{{ item.title }}</dt>
                                    </div>
                                    <div class="detail">
                                        <span>founder:{{ item.user }}</span>
                                        <span>createTime:{{ item.time }}</span>
                                    </div>
                                    <div class="content">
                                        <dd>Content:</dd>
                                        <dd>{{ item.text }}</dd>

                                    </div>
                                    <div class="change" id="{{ item.id }}">
                                    <span data-toggle="modal" data-target="#revamp">
                                        Modify this entry
                                    </span>
                                    </div>
                                </li>
                                {% endfor %}
                            </div>
                        </ul>
                    </div>
                </div>
            </div>
        {#    <div class="container" style="width: 50%;margin-top:10px">#}
        {#        <div class="offset-md-4">#}
        {#            <ul class="pagination pagination-sm">#}
        {#                <li class="page-item"><a class="page-link" href="#">Previous</a></li>#}
        {#                <li class="page-item"><a class="page-link" href="#">1</a></li>#}
        {#                <li class="page-item"><a class="page-link" href="#">2</a></li>#}
        {#                <li class="page-item"><a class="page-link" href="#">3</a></li>#}
        {#                <li class="page-item"><a class="page-link" href="#">Next</a></li>#}
        {#            </ul>#}
        {#        </div>#}
        {#    </div>#}
        {#    添加词条#}
            <div class="modal fade" id="add">
                <div class="modal-dialog">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                    <h4 class="modal-title" style="color: black">Create the entry under {{ detail }}</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                        <form  method="post" action="{% url 'message:add' %}">
                            {% csrf_token %}
                            <div class="modal-body" style="color: black">
                                    <div class="form-group">
                                        <label for="">title</label>
                                        <input type="text" class="form-control" name="title">

                                    </div>
                                    <div class="form-group">
                                        <label for="">content</label>
                                        <textarea name="text" id="" rows="10" class="form-control"></textarea>
                                    </div>
                                <input type="hidden" value="{{ name }}" name="name" >
                                <input type="hidden" value="" name="Dname" id="Dname">
                            </div>
                            <!-- 模态框底部 -->
                            <div class="modal-footer" style="justify-content: center">
                            <div class="row">
                                <div>
                                    <button type="submit" class="btn btn-secondary">submit</button>
                                </div>

                            </div>
                            </div>
                        </form>
                    </div>
                    </div>
                </div>
            </div>
        {#    修改词条#}
            <div class="modal fade" id="revamp">
                <div class="modal-dialog">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                    <h4 class="modal-title" style="color: black">Modify this entry</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                        <form  method="post" action="{% url 'message:modification' %}">
                            {% csrf_token %}
                            <div class="modal-body" style="color: black">
                                    <div class="form-group">
                                        <label for="">title</label>
                                        <input type="text" class="form-control" name="title" id="js_title" disabled="disabled">

                                    </div>
                                    <div class="form-group">
                                        <label for="">content</label>
                                        <textarea name="text" id="js_text" rows="10" class="form-control"></textarea>
                                    </div>
                                <input type="hidden" value="" name="category" id="js_category">
                                <input type="hidden" value="" name="id" id="js_id">
                            </div>
                            <!-- 模态框底部 -->
                            <div class="modal-footer" style="justify-content: center">
                            <div class="row">
                                <div>
                                    <button type="submit" class="btn btn-secondary">submit</button>
                                </div>
                            </div>
                            </div>
                        </form>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header" style="position:absolute;bottom: 0px;">
                <p class="text-center" style="position: relative;top:10px;font-size:12px;color:rgba(213,212,215, 0.8)">—— ©copyright Lingxi Kuang and Yifei Zhu All Rights Reserved. ——</p>
            </div>
    </body>
</html>